<template>
    <div class="put-activity-list">
        <div class="content">
            <div class="add-btn text-right clear-both">
                    <el-input class="float-left search" placeholder="请输入内容" v-model="searchValue">
                        <el-button slot="append" icon="search" @click="getPutList"></el-button>
                    </el-input>
                <el-button class=" btn" type="danger"  @click="toSetUp">新建投放</el-button>
            </div>
            <div class="table-div">
                <el-table
                    :data="tableData"
                    stripe
                    style="width: 100%">
                    <el-table-column prop="name" label="投放名称" width="100"> </el-table-column>
                    <el-table-column prop="point_name" label="关联位置"> </el-table-column>
                    <el-table-column prop="act_name" label="关联活动 "> </el-table-column>
                    <el-table-column prop="plat" label="投放平台 ">  </el-table-column>
                    <el-table-column prop="created_at" label="创建时间 " > </el-table-column>
                    <el-table-column prop="begin_time" label="投放时间 " > </el-table-column>
                    <el-table-column  prop="tag" label="标签" width="100" > </el-table-column>
                    <!--<el-table-column prop="tag" label="标签" width="100"  filter-placement="bottom-end" :render-header="ActivitySortIcon"> </el-table-column>-->
                    <el-table-column prop="address" label="操作 " width="100" >
                        <template slot-scope="scope">
                            <el-button style="margin-right:10;"@click="editClick(scope.row)" type="text" size="small">编辑</el-button>
                            <el-button style="margin-left:0;margin-right:10;"@click="deleteClick(scope.row)" type="text" size="small">删除</el-button>  
                            <el-button style="margin-left:0;margin-right:10;" @click="actionClick(scope.row,1)" type="text" size="small" v-show="scope.row.status==2&&(new Date(scope.row.end_time)>new Date())">开始</el-button>
                            <el-button style="margin-left:0;margin-right:10;"@click="actionClick(scope.row,2)" type="text" size="small" v-show="scope.row.status==1&&(new Date(scope.row.end_time)>new Date())">暂停</el-button>   
                        </template>
                    </el-table-column>
                </el-table>
                <!--<el-collapse-transition>
                    <div class="state-select cursor"  v-show="selectListShow">
                        <p>已开始</p>
                        <p>进行中</p>
                        <p>未开始</p>
                        <p>已暂停</p>
                    </div>
                </el-collapse-transition>-->
               

                <div class="text-center bg-white" v-show="tableData.length==0">
                    您还没有创建投放规则？<a @click="toSetUp" class="cursor">去创建一个</a>
                </div>
            </div>
            <div class="paging-num text-center">
                <el-pagination
                small
                layout="prev, pager, next"
                @current-change="pageChange"
                :total="total">
                </el-pagination>
            </div>
        </div>  
    </div>
</template>

<script>
	import * as api from './../api/api';
export default {
    data(){
        return {
            searchValue:'', //搜索
            tableData: [],
            selectListShow:false,
            current_page:1, //当前页码
            last_page:'',//最后一页
            limit:10, //一页显示多少条
            total:0, //总条数
        }
    },
    mounted(){
        this.getPutList();
    },
    computed: {

    },
    methods: {
        //投放列表
        getPutList(){
            let vm = this;
            let body={
                search:vm.searchValue,  //名称搜索关键字
                // sort:'id',  //	排序字段
                // order:'',   //升序降序（aes desc）
                offset:(parseInt(vm.current_page)-1)*parseInt(vm.limit),   //	第几条开始
                limit:vm.limit,  //每页几个
            };
            api.getPutList(body).then(res=>{
                if(res.data.code==0){
                    res.data.rows.forEach((item,index)=>{
                        let plat=''; 
                        JSON.parse(item.platform).forEach((a,b)=>{
                            if(a==1){
                                plat=plat+' '+'Android'    
                            }else if(a==0){
                                plat=plat+' '+'ios'  
                            }
                        });
                        item.plat=plat;
                        //状态
                        if(item.status==1){
                            item.tag='进行中';
                        }else if(item.status==2){
                            item.tag='已暂停';
                        }else if(new Date(item.begin_time)<new Date()){
                            item.tag='未开始';
                        }else if(new Date(item.end_time)<new Date()){
                            item.tag='已结束';
                        }
                    });
                    vm.tableData=res.data.rows;
                }
            });
        },
         //列表分页
        pageChange(a){
            this.current_page=a;
            this.getPutList();
        },
        //修改投放状态
        actionClick(item,val){
            let vm = this;
            let body={
                id:item.id,
                status:val
            };
            api.editPutState(body).then(res=>{
                if(res.data.code==0){
                    vm.$message({
                        message: res.data.message,
                        type: 'success'
                    });
                    vm.getPutList();
                }
            });
        },
        //删除投放
        deleteClick(item){
            let vm = this;
            api.deletePutList({ids:item.id}).then(res=>{
                if(res.data.code==0){
                    vm.$message({
                        message: res.data.message,
                        type: 'success'
                    });
                    vm.getPutList();
                }
            });
        },
        //编辑
        editClick(a){
            this.$router.push({name:'editPutList',query:{putId:a.id}});
        },
        ActivitySortIcon(h, {column}) {
            return h('span',[
                    h('span', column.label),
                    h('span',{
                        class:'el-icon-arrow-down cursor',
                        style:'margin-left:6px;width:30px;display:inline-block;',
                        on:{
                            click:this.selectState
                        }
                    })
                ]);
        },
        selectState(){
            this.selectListShow=!this.selectListShow;
        },
        //新建投放
        toSetUp(){
            this.$router.push({name:'putCreate'})
        },
        
    }
    
}
</script>

<style lang="less" scoped>
.put-activity-list{
    height:100%;
    width:100%;
    background:#fff;
    padding:40px;
    box-sizing:border-box;
    overflow:auto;
    .content{
        min-width:1020px;
    }
    .table-div{
        position:relative;
        .state-select{
            width:100px;
            position:absolute;
            top:40px;
            right:120px;
            background:#F4F8FB;
            p{
                height:40px;
                line-height:40px;
                padding-left: 18px;
                padding-right: 18px;
                color:#999;
                &:hover{
                    background:#EEF1F6;
                    color:#333;
                }
            }
        }
    }
    
    .add-btn{
        margin-bottom:20px;
        .search{
            width:400px;
        }
        .btn{
            border-radius:20px;
            padding: 8px 25px;
        }
    }
    .paging-num{
        margin:20px;
    }
    .bg-white{
        padding:30px 0;
        color:#888;
        a{
            color: #ec5463;
            text-decoration: none;
        }
    }
}
</style>
